<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <template slot="idx" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="level" slot-scope="text, record">
        <a-tag color="pink" v-show="record.level == 0"> 一级 </a-tag>
        <a-tag color="red" v-show="record.level == 1"> 二级 </a-tag>
        <a-tag color="orange" v-show="record.level == 2"> 三级 </a-tag>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "idx",
          scopedSlots: { customRender: "idx" },
        },
        {
          title: "权限名称",
          dataIndex: "authName",
        },
        {
          title: "路径",
          dataIndex: "path",
        },
        {
          title: "权限等级",
          dataIndex: "level",
          scopedSlots: { customRender: "level" },
        },
      ],
      data: [],
    };
  },
  created() {
    this.getRightsList();
  },
  methods: {
    async getRightsList() {
      const { data: res } = await this.$http.get("rights/list");
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.data = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
